Como usar los selectores :host y ::ng-deep para acceder al css de componentes en angular
El selector :host se utiliza para hacer referencia al propio componente en el que estamos, lo utilizamos asi:
:host {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: space-between;
align-items: center;
}
De esta manera todos los estilo que pongamos se aplicaran directamente sobre la etiqueta de nuestro componente
El selector ::ng-deep se usa para acceder a selectores (clases) internas de un componente.
Normalmente tendremos que limitarlo a dentro de una etiqueta o clase concreta, si no se aplicará a lo largo de toda la aplicación, se usa asi:
.scroll-viewport ::ng-deep .cdk-virtual-scroll-content-wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}En este caso estamos aplicando estilos a la clase .cdk-virtual-scroll-content-wrapper que está dentro de un componente con la clase .scroll-viewport, esta última clase es nuestra, pero la primera es interna a un componente al que no tenemos acceso
En este caso concreto el componente es el siguiente:
<cdk-virtual-scroll-viewport itemSize="50" class="scroll-viewport"></cdk-virtual-scroll-viewport>
La clase .cdk-virtual-scroll-content-wrapper está dentro de dicho componente, para saber el nombre de esta clase solo podemos verlo al ejecutar la aplicación y acceder desde el inspector del navegador, así podremos usar ::ng-deep para poder modificar las clases que hay dentro de componentes a los que no tenemos acceso directamente.
Angular | css | selectors